<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        background: #eee;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
      // JavaScript code goes here
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var x = canvas.width/2;
      var y = canvas.height-30;
      var dx = 2;
      var dy = -2;
      var ballRadius = 10;
      var paddleHeight = 10;
      var paddleWidth = 75;
      var paddleX = (canvas.width - paddleWidth) / 2;
      var rightPressed = false;
      var leftPressed = false;
      var brickRowCount = 3;
      var brickColumnCount = 5;
      var brickWidth = 75;
      var brickHeight = 20;
      var brickPadding = 10;
      var brickOffsetTop = 30;
      var brickOffsetLeft = 30;

      var bricks = [];
      for (c = 0; c < brickColumnCount; c++){
        bricks[c] = [];
        for(r = 0; r< brickRowCount; r++){
          bricks[c][r] = { x: 0, y: 0, status: 1};
        }
      }

      var score = 0;
      var lives = 3;
      



      function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);  /*前面2个是初始位置*/
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
      }

      function drawBricks(){
        for(c = 0; c< brickColumnCount; c++) {
          for(r = 0; r < brickRowCount; r++) {
            if(bricks[c][r].status ==1){

            var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX,brickY,brickWidth,brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();

            }
            
          }
        }

      }

      function collisionDetection(){
        for (c = 0; c< brickColumnCount; c++){
          for(r = 0; r< brickRowCount; r++){
            var b = bricks[c][r];
            //calculations
            if(b.status ==1){ 
              if (x > b.x && 
                  x < b.x + brickWidth && 
                  y > b.y && 
                  y< b.y + brickHeight
              ) {
                  dy = -dy;
                  b.status = 0;
                  score++;
                  if(score == brickRowCount * brickColumnCount){
                    alert("YOU WIN, CONGRATULATIONS!");
                    document.location.reload();
                  }
              }
            }
          }
        }
      }

      function drawScore(){
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Score:" + score, 8 , 20);
      }

      function drawLives() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
    }



      function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      drawBricks();
      collisionDetection();
      drawScore();
      drawLives();
      x += dx;
      y += dy;
      
      if(y + dy < ballRadius){
        dy = -dy;
      }
      else if (y + dy > canvas.height-ballRadius){
        if(x > paddleX && x<paddleX + paddleWidth){
          dy = -dy;
        }
        else{
          lives--;
          if (!lives) {
            alert("GAME OVER");
            document.location.reload();
            
          } else {
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 2;
            dy = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }

        }
      }
      if(x + dx < ballRadius||x + dx > canvas.width-ballRadius){
        dx = -dx;
      }

      if(rightPressed && paddleX < canvas.width - paddleWidth){
        paddleX += 7;
      }
      else if(leftPressed && paddleX > 0){
        paddleX -=7;
      }
      requestAnimationFrame(draw);

    }

      document.addEventListener("keydown",keyDownHandler,false);
      document.addEventListener("keyup",keyUpHandler,false);
      document.addEventListener("mousemove", mouseMoveHandler,false);
      function keyDownHandler(e) {
      if (e.keyCode == 39) {
      rightPressed = true;
      } 
      else if (e.keyCode == 37) {    /*keyCode 为 37 是左箭头键，而 39 是右箭头键*/
      leftPressed = true;
      }
    }

      function keyUpHandler(e) {
      if (e.keyCode == 39) {
      rightPressed = false;
      } 
      else if (e.keyCode == 37) {
      leftPressed = false;
      }
    }

      function mouseMoveHandler(e){
        var relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > paddleWidth / 2 && relativeX < canvas.width - paddleWidth / 2) {
          paddleX = relativeX - paddleWidth / 2 ;
        }
      }

      draw();

    </script>
  </body>
</html>
